<template>
  <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="onScrollToLower"
  >
    <view class="order-list">
      <template v-for="item in orderList" >
        <view class="order-item-card-wrap" :key="item.orderId">
          <order-item-card :orderInfo="item" @click="onClick"  @again="onAgain" @remove="onRemoveConfirm"  />
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<script>
import {mapGetters} from 'vuex'
import orderItemCard from "./orderItemCard";
import {
  fetchTelephoneChargesOrderList,
  deleteTelephoneChargesOrder,
} from "../../../api/dailyLife";
import {TELEPHONE_CHARGES_ORDER_TYPE} from '../../../consts'
let pageNumber = 1
let lock = false
export default {
  name: "illegalOrder",
  components: {
    orderItemCard
  },
  computed: mapGetters(['isLogin', 'uid']),
  data () {
    return {
      orderList: []
    }
  },
  mounted () {
    this.getOrderList(1)
  },
  methods: {
    getOrderList (page, override) {
      const data = {
        userId: this.uid,
        page
      }
      if (!lock) {
        lock = true
      } else {
        return
      }
      if (page === 1) {
        uni.showLoading()
      }
      fetchTelephoneChargesOrderList(data).then((res) => {
        const {code, data, msg} = res
        if (code === 1) {
          pageNumber = page
          const list = data.map((item) => {
            const {payStatus, status, orderStatus, orderId, createTime, number, money} = item
            return {
              payStatus,
              status,
              orderStatus,
              createTime,
              number,
              numberName: `${this.$i18n['手机号']}${number}`,
              money,
              orderId
            }
          })
          this.orderList = override ? list : this.orderList.concat(list)
        } else {
          console.error(msg)
        }
      }).finally(() => {
        lock = false
        uni.hideLoading()
      })
    },
    onScrollToLower () {
      this.getOrderList(pageNumber + 1)
    },
    onClick (info) {
      const {orderId} = info
      uni.navigateTo({
        url: `/pages/order/orderInfo/index?orderId=${orderId}&orderType=${TELEPHONE_CHARGES_ORDER_TYPE}`
      })
    },
    onAgain (info) {
      const {number} = info
      uni.navigateTo({
        url: `/pages/dailyLife/telephone/index?number=${number}`
      })
    },
    onRemoveConfirm(info) {
      const _this = this
      uni.showModal({
        title: _this.$i18n['提示'],
        cancelText: _this.$i18n['取消'],
        confirmText: _this.$i18n['确认'],
        content: _this.$i18n['确定要删除这条订单吗？'],
        success: function (res) {
          if (res.confirm) {
            _this.onRemove(info)
          }
        }
      });
    },
    onRemove (info) {
      const {orderId} = info
      const data = {
        userId: this.uid,
        orderId
      }
      uni.showLoading()
      deleteTelephoneChargesOrder(data).then((res) => {
        const {code, msg} = res
        if (code === 1) {
          this.getOrderList(1, true)
        } else {
          console.error(msg)
        }
      })
    },
  }
}
</script>

<style scoped>
.order-list {
  padding: 32upx 30upx;
}
.scroll-view {
  width: 100%;
  height: 100%;
}
.order-item-card-wrap {
  margin-bottom: 20upx;
}
.order-item-card-wrap:last-child{
  margin-bottom: 0
}

</style>